
body {
    background: url('../images/playstation-pattern.png')
}

/*--- padding ---*/
.m-padded {
    padding: 0.2em !important;
}

.m-padded-tb-mini {
    padding-top: 0.2em !important;
    padding-bottom: 0.2em !important;
}

.m-padded-tiny {
    padding: 0.3em !important;
}

.m-padded-mini {
    padding-top: 0.4em !important;
    padding-bottom: 0.4em !important;
}

.m-padded-tb-small {
    padding-top: 0.5em !important;
    padding-bottom: 0.5em !important;
}

.m-padded-tb {
    padding-top: 1em !important;
    padding-bottom: 1em !important;
}

.m-padded-tb-large {
    padding-top: 2em !important;
    padding-bottom: 2em !important;
}

.m-padded-tb-big {
    padding-top: 3em !important;
    padding-bottom: 3em !important;
}

.m-padded-tb-huge {
    padding-top: 4em !important;
    padding-bottom: 4em !important;
}

.m-padded-tb-massive {
    padding-top: 5em !important;
    padding-bottom: 5em !important;
}

.m-padded-lr {
    padding-left: 3em !important;
    padding-right: 3em !important;
}

.m-padded-message {
    padding-left: 50px !important;
}

/*--- image ---*/
.m-image {
    width: 100px;
}

.m-image-bg {
    width: 150px;
}

.m-image-big {
    width: 180px !important;
}

/*--- text ---*/
.m-text {
    font-weight: 300 !important;
    letter-spacing: 1px !important;
    line-height: 1.6em !important;
}

.m-text-thin {
    font-weight: 300 !important;
}

.m-text-small {
    font-weight: 500 !important;
}

.m-text-huge {
    font-weight: 700 !important;
}

.m-text-spaced {
    letter-spacing: 1px !important;
}

.m-text-lined {
    line-height: 1.8em !important;
}

.m-text-color {
    color: #333333 !important;
}

/* --- opacity --- */
.m-opacity-mini {
    opacity: 0.8 !important;
}

.m-opacity-big {
    opacity: 0.4 !important;
}

/* --- display --- */
.m-inline-block {
    display: inline-block !important;
}

/* ---- position---- */
.m-top-right {
    position: absolute;
    top: 0;
    right: 0;
}

.m-tag-right {
    position: fixed !important;
    bottom: 20px !important;
    right: -2px !important;
    z-index: 100 !important;
}

/*--- icon ---*/
.my-icon {
    width: 20px;
}

.my-mark-tiny {
    width: 120px !important;
    height: 120px !important;;
}

.my-mark-small {
    width: 140px !important;
    height: 140px !important;;
}

.my-mark {
    width: 180px !important;
    height: 180px !important;;
}

/* --- container--- */
.m-container {
    max-width: 72em !important;
    margin: auto !important;
}

.m-container-small {
    max-width: 60em !important;
    margin: auto !important;
}

/* --- margin--- */
.m-margin-tb-tiny {
    margin-top: 0.3em !important;
    margin-bottom: 0.3em !important;
}

.m-margin-tb-small {
    margin-top: 0.4em !important;
    margin-bottom: 0.4em !important;
}

.m-margin-tb {
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
}

.m-margin-tb-large {
    margin-top: 1.5em !important;
    margin-bottom: 1.5em !important;
}

.m-margin-tb-huge {
    margin-top: 2em !important;
    margin-bottom: 2em !important;
}

.m-margin-tb-big {
    margin-top: 2.5em !important;
    margin-bottom: 2.5em !important;
}

.m-margin-label {
    margin-bottom: 0.4em !important;
}

.m-segments-top-tiny {
    margin-top: 1.5em !important;
}

.m-segments-top {
    margin-top: 2em !important;
}

.m-margin-field-small {
    margin-left: 0.5em !important;
}

.m-margin-field {
    margin-left: 1em !important;
}

.m-margin-filed-large {
    margin-left: 2em !important;
}

.m-mobile-show {
    display: none !important;
}

/* ---- media ---- */
@media screen and (max-width: 768px) {
    .m-mobile-hidden {
        display: none !important;
    }

    .m-mobile-show {
        display: block !important;
    }
}

/*----- shadow ------*/
.m-container-shadow-small {
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

.ui.toggle.checkbox .box:before, .ui.toggle.checkbox label:before {
    display: block;
    position: absolute;
    content: '';
    z-index: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    border: none;
    top: 0;
    background: gray;
    width: 3.5rem;
    height: 1.5rem;
    border-radius: 500rem;
}
